<template>
    <ONavNew />
    <div class="gcarousel">
        <carousel :slides="carouselSlides" />
    </div>

    <div class="index-middle">
        <div class="demo-collapse">
            <el-collapse v-model="activeNames0" @change="handleChange">
                <el-collapse-item title="故渊" name="1">

                    <div>
                        <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="推荐" name="first"><el-space wrap :size="40">
                                    <Card v-for="item in useData.theHome" :name="item.name" :desc="item.currDesc"
                                        :img="item.iconPath" :time1="item.startTeachingTime"
                                        :time2="item.startTeachingTime" :id="item.currNo" />
                                </el-space></el-tab-pane>
                            <el-tab-pane label="前端开发" name="second"><el-space wrap :size="40">
                                    <Card v-for="item in useData.theHome.slice(1, 3)" :name="item.name"
                                        :desc="item.currDesc" :img="item.iconPath" :time1="item.startTeachingTime"
                                        :time2="item.startTeachingTime" :id="item.currNo" />
                                </el-space></el-tab-pane>
                            <el-tab-pane label="后端开发" name="third">暂无课程数据</el-tab-pane>
                            <el-tab-pane label="精品免费" name="fourth"><el-space wrap :size="40">
                                    <Card v-for="item in useData.theHome" :name="item.name" :desc="item.currDesc"
                                        :img="item.iconPath" :time1="item.startTeachingTime"
                                        :time2="item.startTeachingTime" :id="item.currNo" />
                                </el-space></el-tab-pane>
                        </el-tabs>
                    </div>

                </el-collapse-item>
                <el-collapse-item title="更多" name="2">
                    <div>
                        <el-space wrap :size="40">
                            <Card v-for="item in useData.theHome" :name="item.name" :desc="item.currDesc"
                                :img="item.iconPath" :time1="item.startTeachingTime" :time2="item.startTeachingTime"
                                :id="item.currNo" />
                        </el-space>
                    </div>
                </el-collapse-item>

            </el-collapse>
        </div>
    </div>
</template>

<style scoped>
.gcarousel {
    position: absolute;
    top: 10%;
    left: 26%;
    width: 70%;
    height: 100%;
    /* 或者你希望的高度 */
    overflow: hidden;
}

.index-middle {
    position: absolute;
    top: -10%;
    /* 调整顶部位置 */
    left: 10%;
    /* 调整左侧位置 */
    right: 15%;
    /* 调整右侧位置，确保盒子宽度 */
    bottom: 0%;
    /* 调整底部位置 */
    width: 90%;
    /* 确保 .index-middle 占据整个宽度 */
    transform: translateY(-250px);
}

.demo-collapse {
    position: relative;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 90%;
    /* 确保 .demo-collapse 占据 .index-middle 的宽度 */
}

.demo-tabs {
    width: 100%;
    /* 确保 .demo-tabs 占据 .demo-collapse 的宽度 */
}

.el-tab-pane {
    width: 100%;
    /* 确保 .el-tab-pane 占据 .demo-tabs 的宽度 */
}

.el-space {
    width: 100%;
    /* 确保 .el-space 占据 .el-tab-pane 的宽度 */
}
</style>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import carousel from './carousel.vue';

const carouselSlides = ref([
    { image: 'https://codelover.club/files/stutasks/userID_864/currNo_43/222/Fqjxv-1ZPNguzVmAmyDz7T_yiKwr.jpg', alt: '落日' },
    { image: 'https://codelover.club/files/stutasks/userID_864/currNo_43/222/Fu5ldbrDeRpOlWq-4hZDQP1Yfm0U.jpg', alt: '图书馆' },
    { image: 'https://codelover.club/files/stutasks/userID_864/currNo_43/222/FumKGeGNHU4rmm7iUxhzPOQI4vwK.jpg', alt: '雾雨天' },
    // 继续添加图片数据
]);
// 折叠版
const activeNames0 = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}

// Tabs 标签页
import type { TabsPaneContext } from 'element-plus'

const activeName1 = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}



import Card from '../components/Card.vue';
import useDataStore from "../stores/Data";

const useData = useDataStore()
onMounted(() => {
    useData.getHomeData()
})


// 从下面位置写新的引入，上方的不要动
import ONavNew from '../components/ONavNew.vue'
</script>